<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>团团妈妈和团团爸爸的小星星</title>
    <script>
        var context;
        var arr = new Array();
        var starCount = 800;
        var rains = new Array();
        var rainCount = 30;
        //初始化画布及context
        function init(){
            //获取canvas
            var meteor = document.getElementById("meteor");
            // windowWidth = window.innerWidth; //当前的窗口的高度
            meteor.width=window.innerWidth;
            meteor.height=window.innerHeight;
            //获取context
            context = meteor.getContext("2d");
        }
        //创建一个星星对象
        var Star = function (){
            this.x = window.innerWidth * Math.random();//横坐标
            this.y = 5000 * Math.random();//纵坐标
            this.text=".";//文本
            this.color = "white";//颜色
            //产生随机颜色
            this.getColor=function(){
                var _r = Math.random();
                if(_r<0.3){
                    this.color = "#333";
                }else if(_r<0.6&&_r>=0.3){
                    this.color = "#fcdb05";
                }else{
                    this.color = "white";
                }
            }
            //初始化
            this.init=function(){
                this.getColor();
            }
            //绘制
            this.draw=function(){
                context.fillStyle=this.color;
                context.fillText(this.text,this.x,this.y);
            }
        }
        //画Star
        function drawStar(cxt, r, R, x, y){
            cxt.beginPath();
            var str =('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6);//随机生成
            for(var i = 0; i < 5; i ++ ){
                cxt.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI) * R + x,
                    -Math.sin((18 + i * 72) / 180 * Math.PI) * R + y) ;
                cxt.lineTo(Math.cos((54 + i * 72) / 180 * Math.PI) * r + x,
                    -Math.sin((54 + i * 72) / 180 * Math.PI) * r + y) ;
            }
            cxt.fillStyle = "#"+str;
            cxt.strokeStyle ="#"+str;
            cxt.closePath();
            cxt.fill();
            cxt.stroke();
        }
        //画月亮
        function drawMoon(){
            context.beginPath();
            context.arc(100,75,50,0,2*Math.PI);
            context.fillStyle="white";
            context.fill();
        }
        //页面加载的时候
        window.onload = function() {
            init();
            //画星星
            for (var i=0;i<starCount;i++) {
                var star = new Star();
                star.init();
                star.draw();
                arr.push(star);
            }
            //画流星
            for (var i=0;i<rainCount;i++) {
                var rain = new MeteorRain();
                rain.init();
                rain.draw();
                rains.push(rain);
            }
            // drawStar(cxt, r, R, x, y)
            drawStar(context,3,6,95,135);
            drawStar(context,3,6,125,130);
            drawStar(context,3,6,150,115);
            drawStar(context,3,6,160,90);
            drawStar(context,3,6,165,60);
            drawMoon();//绘制月亮
            playStars();//绘制闪动的星星
            playRains();//绘制流星
        }
        //星星闪起来
        function playStars(){
            for (var n = 0; n < starCount; n++){
                arr[n].getColor();
                arr[n].draw();
            }

            setTimeout("playStars()",100);
        }

        /*流星雨开始*/
        var MeteorRain = function(){
            this.x = -1;
            this.y = -1;
            this.length = -1;//长度
            this.angle = 30; //倾斜角度
            this.width = -1;//宽度
            this.height = -1;//高度
            this.speed = 1;//速度
            this.offset_x = -1;//横轴移动偏移量
            this.offset_y = -1;//纵轴移动偏移量
            this.alpha = 1; //透明度
            this.color = "";//流星的色彩
            this.color1 = "";//流星的色彩
            this.color2 = ""; //流星的色彩
            /****************初始化函数********************/
            this.init = function () //初始化
            {
                this.getPos();
                this.alpha = 1;//透明度
                this.getRandomColor();
                //最小长度，最大长度
                var x = Math.random() * 80 + 150;
                this.length = Math.ceil(x);
//         x = Math.random()*10+30;
                this.angle = 30; //流星倾斜角
                x = Math.random()+0.5;
                this.speed = Math.ceil(x); //流星的速度
                var cos = Math.cos(this.angle*3.14/180);
                var sin = Math.sin(this.angle*3.14/180) ;
                this.width = this.length*cos ; //流星所占宽度
                this.height = this.length*sin ;//流星所占高度
                this.offset_x = this.speed*cos ;
                this.offset_y = this.speed*sin;
            }
            /**************获取随机颜色函数*****************/
            this.getRandomColor = function (){
                var c = Math.random();
                if(c<0.3){
                    this.color = "white";
                }else if(c>=0.3&&c<0.6){
                    this.color = "#fcdb05";
                }else{
                    this.color = "#00a8f3";
                }

                var a = Math.ceil(255-240* Math.random());
                //中段颜色
                this.color1 = "rgba("+a+","+a+","+a+",1)";
                //结束颜色
                this.color2 = "black";

            }
            /***************重新计算流星坐标的函数******************/
            this.countPos = function ()//
            {
                //往左下移动,x减少，y增加
                this.x = this.x - this.offset_x;
                this.y = this.y + this.offset_y;
            }
            /*****************获取随机坐标的函数*****************/
            this.getPos = function () //
            {
                //横坐标200--1200
                this.x = Math.random() * window.innerWidth+500; //窗口高度
                //纵坐标小于600
                this.y = Math.random() * window.innerHeight; //窗口宽度
            }
            /****绘制流星***************************/
            this.draw = function () //绘制一个流星的函数
            {
                context.save();
                context.beginPath();
                context.lineWidth = 1; //宽度
                context.globalAlpha = this.alpha; //设置透明度
                //创建横向渐变颜色,起点坐标至终点坐标
                var line = context.createLinearGradient(this.x, this.y,
                    this.x + this.width,
                    this.y - this.height);
                //分段设置颜色
                line.addColorStop(0, this.color);
                line.addColorStop(0.3, this.color1);
                line.addColorStop(0.6, this.color2);
                context.strokeStyle = line;
                //起点
                context.moveTo(this.x, this.y);
                //终点
                context.lineTo(this.x + this.width, this.y - this.height);
                context.closePath();
                context.stroke();
                context.restore();
            }
            this.move = function(){
                //清空流星像素
                var x = this.x+this.width-this.offset_x;
                var y = this.y-this.height;
                context.clearRect(x-3,y-3,this.offset_x+5,this.offset_y+5);
//         context.strokeStyle="red";
//         context.strokeRect(x,y-1,this.offset_x+1,this.offset_y+1);
                //重新计算位置，往左下移动
                this.countPos();
                //透明度增加
                this.alpha -= 0.002;
                //重绘
                this.draw();
            }
        }
        //绘制流星
        function playRains(){

            for (var n = 0; n < rainCount; n++){
                var rain = rains[n];
                rain.move();//移动
                if(rain.y>window.innerHeight){//超出界限后重来
                    context.clearRect(rain.x,rain.y-rain.height,rain.width,rain.height);
                    rains[n] = new MeteorRain();
                    rains[n].init();
                }
            }
            setTimeout("playRains()",2);
        }
        /*流星雨结束*/
    </script>
    <style type="text/css">
        body{
            background-color: #050e0d;
        }
        body,html{width:100%;height:100%;overflow:hidden;}
    </style>
</head>
<body>
<canvas id="meteor"></canvas>
<audio autoplay="autopaly" loop="loop">
    <source src="masbfca.mp3" type="audio/mp3" />
</audio>
</body>
</html>